<template>
    <div class="container">
        <div class="omission-header">
            <div class="omission-header-row">
                <div>
                    <span>彩种：</span>
                    <el-select size="small" style="width:180px" placeholder="哈希分彩 / 前三 / func_1_0" />
                </div>
                <div>
                    <span>玩法：</span>
                    <el-select size="small" style="width:180px" placeholder="3码出0 (343注)" />
                </div>
                <el-button type="danger" size="small">一键撤单</el-button>
            </div>
            <div class="omission-info-row">
                <div>当前期数：</div>
                <div class="omission-issue">202509021200</div>
                <div>投注期数：</div>
                <div class="omission-issue omission-issue-green">202509021200</div>
                <div>当前中奖：</div>
                <div class="omission-win">7,0,6,9,9</div>
                <div>倒计时：</div>
                <div class="omission-countdown">11</div>
            </div>
        </div>
        <el-table :data="tableData" border stripe class="omission-table">
            <el-table-column prop="index" label="序" align="center" />
            <el-table-column prop="code" label="码" align="center" />
            <el-table-column prop="ben" label="本" align="center" />
            <el-table-column prop="shang" label="上" align="center" />
            <el-table-column prop="zui" label="最" align="center" />
            <el-table-column prop="cha" label="差" align="center" />
            <el-table-column prop="caozuo" label="操" align="center">
                <template #default="scope">
                    <el-button size="small">对冲投注</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>

import { ref } from 'vue';

const tableData = ref([
    { index: 1, code: '0,1,2', ben: 3, shang: 1, zui: 26, cha: 23 },
    { index: 2, code: '0,1,3', ben: 3, shang: 5, zui: 16, cha: 13 },
    { index: 3, code: '0,1,4', ben: 5, shang: 1, zui: 22, cha: 17 },
    { index: 4, code: '0,1,5', ben: 5, shang: 1, zui: 19, cha: 14 },
    { index: 5, code: '0,1,6', ben: 3, shang: 1, zui: 23, cha: 20 },
    { index: 6, code: '0,1,7', ben: 3, shang: 3, zui: 22, cha: 19 },
    { index: 7, code: '0,1,8', ben: 5, shang: 1, zui: 19, cha: 14 },
    { index: 8, code: '0,1,9', ben: 3, shang: 9, zui: 21, cha: 18 },
    { index: 9, code: '0,2,3', ben: 3, shang: 1, zui: 16, cha: 15 },
]);
</script>

<style lang="scss" scoped>
@use "@/assets/global.scss" as *;

.omission-header {
    width: 100%;
    margin-bottom: 16px;
    padding: 0 32px;
    box-sizing: border-box;
}
.omission-header-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}
.omission-info-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    margin-bottom: 16px;
}
.omission-issue {
    font-size: 28px;
    font-weight: bold;
}
.omission-issue-green {
    color: #00b36a;
}
.omission-win {
    color: #f00;
    font-size: 22px;
    font-weight: bold;
}
.omission-countdown {
    color: #f00;
    font-size: 22px;
    font-weight: bold;
}
.omission-table {
    width: 100%;
    margin-bottom: 32px;
    padding: 0 32px;
    box-sizing: border-box;
}
</style>